<template>
	<view class="page">
		<!-- 固定在顶部的搜索区域 -->
		<view class="search-header">
			<view class="search-box">
				<image src="/static/svg/search.svg" class="search-icon"></image>
				<input type="text" placeholder="搜索爆款产品..." v-model="searchParams.name" confirm-type="search" @confirm="search" />
			</view>
			<text class="cancel-btn" @click="goBack">取消</text>
		</view>

		<!-- 筛选选项 -->
		<view class="filter-bar">
			<view class="filter-item" :class="{ active: sortType === 'default' }" @click="changeSort('default')">
				<text>综合</text>
			</view>
			<view class="filter-item" :class="{ active: sortType === 'sales' }" @click="changeSort('sales')">
				<text>销量</text>
			</view>
			<view class="filter-item" :class="{ active: sortType === 'price' }" @click="changeSort('price')">
				<text>价格</text>
				<image src="/static/svg/price-sort.svg" class="sort-icon"></image>
			</view>
			<view class="filter-item" :class="{ active: sortType === 'new' }" @click="changeSort('new')">
				<text>新品</text>
			</view>
			<view class="filter-item" @click="toggleFilterPanel">
				<text class="highlight">筛选</text>
				<image src="/static/svg/filter.svg" class="filter-icon"></image>
			</view>
		</view>

		<!-- 产品列表 滚动区域 -->
		<scroll-view
			class="product-scroll"
			scroll-y="true"
			@scrolltolower="loadMore"
			@refresherrefresh="refresh"
			refresher-enabled="true"
			:refresher-triggered="isRefreshing"
		>
			<view class="product-list">
				<view class="product-item" v-for="(item, index) in pageData.data" :key="index" @click="goToDetail(item)">
					<image :src="item.logo" class="product-image" mode="aspectFill"></image>
					<view class="product-tag" v-if="item.groupType">{{item.groupType}}</view>
					<view class="product-info">
						<text class="product-name">{{item.name}}</text>
						<view class="product-price-row">
							<text class="product-price">¥{{item.price}}</text>
							<text class="product-sales">已拼{{item.sales}}件</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载状态 -->
			<view class="loading-more" v-if="status !== 'noMore'">
				<text v-if="status === 'loading'">加载中...</text>
				<text v-else>上拉加载更多</text>
			</view>
			<view class="no-more" v-else>
				<text>没有更多数据了</text>
			</view>
		</scroll-view>

		<!-- uni-app 右侧抽屉 -->
		<uni-popup ref="filterDrawer" type="right">
			<view class="filter-drawer-content">
				<view class="drawer-header">
					<text class="drawer-title">筛选条件</text>
					<text class="drawer-close" @click="closeFilterDrawer">×</text>
				</view>

				<view class="filter-section">
					<view class="section-title">价格区间</view>
					<view class="price-range">
						<input type="number" placeholder="最低价" v-model="filterOptions.minPrice" />
						<text class="price-divider">-</text>
						<input type="number" placeholder="最高价" v-model="filterOptions.maxPrice" />
					</view>
				</view>

				<view class="filter-section">
					<view class="section-title">商品分类</view>
					<view class="category-list">
						<view
							class="category-item"
							v-for="(item, index) in categories"
							:key="index"
							:class="{ 'selected': filterOptions.category === item.id }"
							@click="selectCategory(item.id)"
						>
							{{item.name}}
						</view>
					</view>
				</view>

				<view class="filter-section">
					<view class="section-title">其他条件</view>
					<view class="option-list">
						<view class="option-item">
							<text>包邮</text>
							<switch :checked="filterOptions.freeShipping" @change="toggleOption('freeShipping')" color="#ff6b01" />
						</view>
						<view class="option-item">
							<text>促销中</text>
							<switch :checked="filterOptions.onSale" @change="toggleOption('onSale')" color="#ff6b01" />
						</view>
					</view>
				</view>

				<view class="drawer-footer">
					<view class="reset-btn" @click="resetFilter">重置</view>
					<view class="confirm-btn" @click="applyFilter">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import {usePageData} from "../../common/usePageData";
import { onLoad } from "@dcloudio/uni-app";
onLoad((options) => {
	// 如果有id参数，说明是编辑模式
	if (options.keyword) {
		console.log("options.keyword",options.keyword);
		searchParams.value.name = options.keyword;
	}
});

// 排序类型
const sortType = ref('default');

// 是否正在刷新
const isRefreshing = ref(false);

// 筛选抽屉引用
const filterDrawer = ref(null);

// 筛选选项
const filterOptions = reactive({
	minPrice: '',
	maxPrice: '',
	category: '',
	freeShipping: false,
	onSale: false
});

// 模拟分类数据
const categories = ref([
	{ id: '1', name: '手机数码' },
	{ id: '2', name: '家用电器' },
	{ id: '3', name: '服装鞋包' },
	{ id: '4', name: '美妆护肤' },
	{ id: '5', name: '生鲜果蔬' },
	{ id: '6', name: '家居家装' }
]);

// 搜索条件

// 使用封装好的分页功能
// 初始化搜索参数
const searchParams = ref({
  page: 1,
  size: 20,
  name:null
});

// 使用 usePageData 获取分页数据和状态
const { pageData, status, searchList, loading } = usePageData('product_list', searchParams);


// 初始化搜索
const initSearch = async () => {
	await searchList();
};

// 搜索
const search = () => {
	searchParams.value.no = 1;
	initSearch();
};

// 更改排序方式
const changeSort = (type) => {
	sortType.value = type;
	searchParams.value.sort = type;
	searchParams.value.no = 1;
	initSearch();
};

// 显示筛选面板
const toggleFilterPanel = () => {
	filterDrawer.value.open();
};

// 关闭筛选面板
const closeFilterDrawer = () => {
	filterDrawer.value.close();
};

// 选择分类
const selectCategory = (categoryId) => {
	filterOptions.category = filterOptions.category === categoryId ? '' : categoryId;
};

// 切换开关选项
const toggleOption = (option) => {
	filterOptions[option] = !filterOptions[option];
};

// 应用筛选条件
const applyFilter = () => {
	// 将筛选条件应用到搜索参数
	searchParams.value.minPrice = filterOptions.minPrice;
	searchParams.value.maxPrice = filterOptions.maxPrice;
	searchParams.value.category = filterOptions.category;
	searchParams.value.freeShipping = filterOptions.freeShipping;
	searchParams.value.onSale = filterOptions.onSale;
	searchParams.value.no = 1;

	// 关闭抽屉并重新搜索
	closeFilterDrawer();
	initSearch();
};

// 重置筛选条件
const resetFilter = () => {
	filterOptions.minPrice = '';
	filterOptions.maxPrice = '';
	filterOptions.category = '';
	filterOptions.freeShipping = false;
	filterOptions.onSale = false;
};

// 下拉刷新
const refresh = async () => {
	isRefreshing.value = true;
	await initSearch();
	isRefreshing.value = false;
	uni.stopPullDownRefresh();
};

// 返回上一页
const goBack = () => {
	uni.navigateBack();
};

// 进入商品详情
const goToDetail = (item) => {
	uni.navigateTo({
		url: `/pages/index/product?id=${item.id}`
	});
};
</script>

<style>
	.page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
	}

	/* 搜索头部 */
	.search-header {
		position: sticky;
		top: 0;
		z-index: 100;
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
	}

	.search-box {
		flex: 1;
		height: 70rpx;
		background-color: #f5f5f5;
		border-radius: 35rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
	}

	.search-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.search-box input {
		flex: 1;
		height: 100%;
		font-size: 28rpx;
	}

	.cancel-btn {
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	/* 筛选栏 */
	.filter-bar {
		position: sticky;
		top: 110rpx;
		z-index: 99;
		display: flex;
		height: 80rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.filter-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #666;
	}

	.filter-item.active {
		color: #ff6b01;
		font-weight: bold;
	}

	.sort-icon, .filter-icon {
		width: 28rpx;
		height: 28rpx;
		margin-left: 6rpx;
	}

	.highlight {
		color: #ff6b01;
	}

	/* 产品列表 */
	.product-scroll {
		flex: 1;
		width: 100%;
	}

	.product-list {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx;
	}

	.product-item {
		width: 48%;
		margin: 1%;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 20rpx;
	}

	.product-image {
		width: 100%;
		height: 360rpx;
	}

	.product-tag {
		position: absolute;
		top: 20rpx;
		left: 0;
		background-color: #ff6b01;
		color: #fff;
		padding: 4rpx 16rpx;
		font-size: 24rpx;
		border-radius: 0 20rpx 20rpx 0;
	}

	.product-info {
		padding: 16rpx;
	}

	.product-name {
		font-size: 28rpx;
		line-height: 36rpx;
		height: 72rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.product-price-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}

	.product-price {
		font-size: 32rpx;
		color: #ff6b01;
		font-weight: bold;
	}

	.product-sales {
		font-size: 24rpx;
		color: #999;
	}

	/* 加载更多 */
	.loading-more, .no-more {
		text-align: center;
		padding: 30rpx 0;
		font-size: 24rpx;
		color: #999;
	}

	/* 筛选抽屉内容样式 */
	.filter-drawer-content {
		width: 70vw;
		height: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.drawer-header {
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #eee;
	}

	.drawer-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.drawer-close {
		font-size: 40rpx;
		color: #999;
	}

	.filter-section {
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.price-range {
		display: flex;
		align-items: center;
	}

	.price-range input {
		flex: 1;
		height: 70rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}

	.price-divider {
		margin: 0 20rpx;
		color: #999;
	}

	.category-list {
		display: flex;
		flex-wrap: wrap;
	}

	.category-item {
		width: 30%;
		height: 70rpx;
		margin: 0 1.5% 20rpx;
		background-color: #f5f5f5;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 8rpx;
		font-size: 26rpx;
	}

	.category-item.selected {
		background-color: #fff1e6;
		color: #ff6b01;
		border: 1rpx solid #ff6b01;
	}

	.option-list {
		padding: 0 20rpx;
	}

	.option-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		font-size: 28rpx;
	}

	.drawer-footer {
		margin-top: auto;
		padding: 20rpx;
		display: flex;
		border-top: 1rpx solid #eee;
	}

	.reset-btn, .confirm-btn {
		flex: 1;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 40rpx;
		font-size: 28rpx;
	}

	.reset-btn {
		background-color: #f5f5f5;
		color: #666;
		margin-right: 20rpx;
	}

	.confirm-btn {
		background-color: #ff6b01;
		color: #fff;
	}
</style>
